<template>
  <el-card>
    <el-alert title="添加商品信息" type="info" show-icon />
    <el-steps :active="active" finish-status="success" align-center>
      <el-step title="基本信息" />
      <el-step title="商品参数" />
      <el-step title="商品属性" />
      <el-step title="商品图片" />
      <el-step title="商品内容" />
      <el-step title="完成" />
    </el-steps>

    <el-tabs tab-position="left" style="height:100%;">
      <el-tab-pane label="用户管理">
        <add-from />
      </el-tab-pane>
      <el-tab-pane label="商品参数">配置管理</el-tab-pane>
      <el-tab-pane label="商品属性">商品参数</el-tab-pane>
      <el-tab-pane label="商品图片">商品属性</el-tab-pane>
      <el-tab-pane label="商品内容">商品图片</el-tab-pane>
    </el-tabs>
    <!-- <el-button style="margin-top: 12px" @click="next">下一步</el-button> -->
    <!-- 表单 -->
  </el-card>
</template>

<script>
import AddFrom from './addFrom/addFrom.vue'
export default {
  name: 'Add',
  components: { AddFrom },
  props: {},
  data() {
    return {
      active: 0
    }
  },
  computed: {}, // 计算属性
  watch: {},
  created() {},
  mounted() {},
  methods: {
    next() {
      if (this.active++ > 4) this.active = 0
    }
  }
}
</script>

<style lang="less" scoped>
.el-alert {

  text-align: center;
  justify-content: center;
}
.formadd {
  float: right;
  width: 80%;
}
.el-steps {
  margin: 15px 0;
}
.el-card {
  .left {
    float: left;
    .el-row {
      padding: 10px 0;
      margin-left: 50px;
    }
  }
}
</style>
